<template>
    <div class="page">
        <div class="head-box">
            <div class="title">18狮桥融资ABN001优先B</div>
            <div class="type">债券类型：资产支持票据</div>
            <div class="name">发行人：中建投信托有限责任公司</div>
        </div>
        <div class="data-box block">
            <div class="title">基本信息</div>
            <div class="data-item">
                <span class="key">发行公告</span>
                <span class="value blue">2017年度中期票据信用评级报告.pdf</span>
            </div>
            <div class="data-item">
                <span class="key">债券代码</span>
                <span class="value">101756046</span>
            </div>
            <div class="data-item">
                <span class="key">债券期限</span>
                <span class="value">5年</span>
            </div>
            <div class="data-item">
                <span class="key">上市交易日</span>
                <span class="value">2017-11-23</span>
            </div>
            <div class="data-item">
                <span class="key">债券摘牌日</span>
                <span class="value">字段未列举完全</span>
            </div>
        </div>

        <advertisement-box class="block" img="http://img5.imgtn.bdimg.com/it/u=4169032523,1297392994&fm=27&gp=0.jpg"/>

        <div class="module-title block">债项评级变动</div>
        <table-view :labels="labels" :data="data" request-btn="点击加载全部" :content-width="400"/>

        <div class="module-title block">主体评级变动</div>
        <table-view :labels="labels" :data="data" request-btn="点击加载全部" :content-width="400"/>
        <div class="logo-box">
            <bottom-logo/>
        </div>

    </div>
</template>

<style lang="less" scoped>

    @import '../../style/variable';

    .page{

        .block{
            border-top: .8rem solid @color-bg-gray;
        }

        .head-box{
            padding: 1.5rem;
            .title{
                font-size: 2.2rem;
                line-height: 2.9rem;
            }
            .type{
                margin: 1.2rem 0 .7rem;
            }
            .type, .name{
                font-size: 1.5rem;
                line-height: 2.1rem;
            }
        }

        .data-box{
            padding: 1.5rem;
            .title{
                font-size: 1.6rem;
                line-height: 2.3rem;
                font-weight: bold;
                margin: .2rem 0 .4rem;
            }
            .data-item{
                font-size: 1.5rem;
                line-height: 2.8rem;
                .key{
                    color: @color-text-gray;
                }
                .blue{
                    color: @color-text-blue;
                }
                .value{
                    float: right;
                }

            }
        }

        .module-title{
            font-size: 1.6rem;
            line-height: 2.3rem;
            padding: 1.5rem;
        }

        .logo-box{
            background-color: @color-bg-gray;
        }

    }
</style>

<script>
    export default {

        data(){

            const labels = [
                {
                    label: '债券名称',
                    key: 'label',
                    width: 88
                },
                {
                    label: '债项评级',
                    key: 'year1',
                },
                {
                    label: '债项评级',
                    key: 'year3',
                },
                {
                    label: '主体评级',
                    key: 'year5',
                },
                {
                    label: '债项评级',
                    key: 'year7',
                },
                {
                    label: '债券类型',
                    key: 'year10',
                }
            ];

            const data = Array(5).fill({
                label: 'AAA',
                year1: 4.4,
                year3: 4.4,
                year5: 4.,
                year7: 4.4,
                year10: 4.4,
            });
            return {labels, data}
        },
        created(){
            this.$store.commit('hideNav', true);
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                setTimeout(()=>{
                    vm.$store.commit('setHeader', {
                        left: 'back',
                        content: '18狮桥融资ABN001优先B',
                        right: 'share'
                    });
                }, 1);
            })
        },
    }
</script>